<template>
    <!-- <div class="search">
        <van-search v-model="value" placeholder="请输入商品名称" @keydown="tiaozhuan" @click="show = true"/>
    </div> -->
    <div class="search">
        <svg class="icon" aria-hidden="true" @click="clickJump">
            <use xlink:href="#icon-sousuo"></use>
        </svg>
        <input v-model="value" type="text" placeholder="请输入商品名" @keydown="enterJump">
    </div>
</template>
<script>
    export default {
        data(){
            return{
                spList:null,
                value: '',
            }
        },
        methods: {
            clickJump(){
                // this.$router.push('/search')
                
                if(this.value){
                    this.$store.commit('searchModule/increment',this.value)
                    console.log('--------------');
                    
                    // this.$router.push({path:'/search'})
                    if(this.path != this.$store.path){
                        this.$router.push({path:'/search'})
                        console.log('000',this.value);
                    }
                    // console.log('+++++++++++++++++++++');
                    
                    
                }else{
                    console.log('dddddddd');
                }
                
            },
            enterJump(event){
                // this.$router.push('/search')
                if(event.keyCode === 13){
                    // if(this.value){
                    //     this.$store.commit('searchModule/increment',this.value)
                    //     console.log('--------------');
                    //     this.$router.push('/search')
                    //     console.log('000',this.value);
                    // }else{
                    //     console.log('dddddddd');
                    // }
                    if(this.value){
                        this.$store.commit('searchModule/increment',this.value)
                        if(this.path != this.$store.path){
                            this.$router.push({path:'/search'})
                            console.log('000',this.value);
                        }else{
                            // this.$router.replace({
                            //     path:'/search',
                            //     name:'search'
                            // })
                            this.$router.push({path:'/search'})
                            console.log('+++++++++++');
                        }
                        // console.log('--------------');
                        
                        // console.log('000',this.value);
                    }else{
                        console.log('dddddddd');
                    }
                }
            },
        },
    }
</script>
<style lang="less" scoped>
    @import '../../style/common.less';
    .search {
            background-color: @blockbdcolor;
            width: 100%;
            height: 2.4rem;
            border: 1px grey solid;
            border-color: rgba(128, 128, 128, 0.2);
            border-radius: 2rem;
            display: flex;
            justify-content:flex-start;
            align-items: center;
            padding: 0 20px;
            svg{
                height: 2rem;
                width: 1.2rem;
            }
            input{
                // font-size: 1rem;
                
                height: 46px;
                width: 100%;
                margin-left: 10px;
                border: none;
                outline: none;
            }
            ::-webkit-input-placeholder {
                color: rgb(231, 228, 228);
            }
            :-moz-placeholder {
                color: rgb(231, 228, 228);
            }
            ::-moz-placeholder{
                color: rgb(231, 228, 228);
            }
            :-ms-input-placeholder {
                color: rgb(231, 228, 228);
            }
        }
</style>